import BaseComponent from "../../pages/BaseComponent";
import {Button, View} from "@tarojs/components";
import "./index.less";
import PickView from "../base/WPickView";

export default class TimeChoseModal extends BaseComponent {

  static defaultProps = {
    choseHO: "00",
    choseMO: "05",
    choseHC: "00",
    choseMC: "00",
    onComfire: undefined,
    onCancell: undefined,
  };

  hValues = [];
  mValues = [];

  hOpen = "00";
  mOpen = "00";
  hClose = "00";
  mClose = "00";

  componentDidMount() {
    super.componentDidMount();

    const {choseHO, choseMO, choseHC, choseMC} = this.props;
    this.hOpen = choseHO;
    this.mOpen = choseMO;
    this.hClose = choseHC;
    this.mClose = choseMC;
  }

  constructor(){
    super();

    let hValues = this.hValues;
    for (let i = 0; i < 10; i++) {
      hValues.push("0"+i);
    }
    for (let i = 10; i < 24; i++) {
      hValues.push(i);
    }
    // for (let i = 0; i < 2; i++) {
    //   hValues.unshift("");
    // }
    // hValues.push("");
    // hValues.push("");

    let mValues = this.mValues;
    for (let i = 0; i < 10; i++) {
      mValues.push("0"+i);
    }
    for (let i = 10; i < 60; i++) {
      mValues.push(i);
    }
    // for (let i = 0; i < 2; i++) {
    //   mValues.unshift("");
    // }
    // mValues.push("");
    // mValues.push("");
  }

  onComfire = ()=>{
    const {onComfire} = this.props;
    if (!!onComfire){
      onComfire(this.hOpen, this.mOpen, this.hClose, this.mClose);
    }
  }

  onCancell = ()=>{
    const {onCancell} = this.props;
    if (!!onCancell){
      onCancell();
    }
  }

  render() {

    const {choseHO, choseMO, choseHC, choseMC} = this.props;

    return (
        <View className='time_chose_modal_content'>
          <View className='time_title'>开启时间</View>
          <View className='time_pick_group'>
            <View className='time_pick'>
              <PickView unit='时' values={this.hValues} value={choseHO} onSelect={v=>this.hOpen =v}/>
            </View>
            <View className='time_pick'>
              <PickView unit='分' values={this.mValues} value={choseMO} onSelect={v=>this.mOpen =v}/>
            </View>
          </View>

          {/*<View className='time_line'></View>*/}
          <View className='time_title'>关闭时间</View>

          <View className='time_pick_group'>
            <View className='time_pick'>
              <PickView unit='时' values={this.hValues} value={choseHC} onSelect={v=>this.hClose =v}/>
            </View>
            <View className='time_pick'>
              <PickView unit='分' values={this.mValues} value={choseMC} onSelect={v=>this.mClose =v}/>
            </View>
          </View>

          <View className='time_chose_ops'>
            <Button className='time_chose_ok' onClick={this.onCancell}>取消</Button>
            <Button className='time_chose_ok' onClick={this.onComfire}>确定</Button>
          </View>

        </View>
    );
  }

}
